<template>
  <div class="user-container app-container page-industry-list">
    <div class="filter-container">
      <div>
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-circle-plus"
          @click="onEditOrAdd()"
        >
          新增话题
        </el-button>
      </div>
      <div>
        <el-input
          v-model="listQuery.mid_table_remark_001_like"
          placeholder="请输入话题标题"
          clearable
          class="filter-item input-item"
          style="width: 200px"
          @clear="handleFilter"
          @keyup.enter.native="handleFilter"
        />
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
        >
          搜索
        </el-button>
      </div>
    </div>
    <div class="page-content">
      <el-table
        :key="0"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column label="ID" align="center" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.id_public_middle_table }}</span>
          </template>
        </el-table-column>
        <el-table-column label="话题标题" align="center">
          <template slot-scope="{ row }">
            {{ row.mid_table_remark_001 }}
          </template>
        </el-table-column>
        <el-table-column label="话题描述" align="center">
            <template slot-scope="{ row }">
              {{ row.mid_table_remark_002 }}
            </template>
        </el-table-column>
        <!-- <el-table-column
          label="操作"
          align="center"
          width="220"
          class-name="small-padding fixed-width"
          :resizable="false"
        >
          <template slot-scope="{ row }">
            <span
              ype="text"
              size="mini"
              @click="onEditOrAdd(row)"
              class="table-btn"
            >
              编辑
            </span>
            <span
              type="text"
              size="mini"
              class="col-danger table-btn"
              @click="handleDelete(row)"
            >
              删除
            </span>
          </template>
        </el-table-column> -->
      </el-table>
    </div>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="currentPage"
      :limit.sync="listQuery.limit"
      @pagination="getPageList"
    />

    <TopicNewModify ref="refNewModify" @refresh="onRefresh"></TopicNewModify>
  </div>
</template>

<script>
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination";
import { middleList } from "@/api/middle";
import TopicNewModify from "./components/new_topic.vue";

export default {
  name: "Topic",
  directives: { waves },
  components: {
    Pagination,
    TopicNewModify,
  },
  data() {
    return {
      listQuery: {
        mid_table_remark_001_like: null,
        invoke_method: "public_load_middle_table_list",
        pre_db_para_middle_table_name:
          "public_middle_table_lite_mod_forum_bbs",
        type_middle_app: 61001,
        type_inner_app: 1001,
        is_online: 0,
        pre_db_para_begin_idx: 0,
        pre_db_para_length_4_list: 10,
      },
      listLoading: false,
      list: [],
      total: 1,
      currentPage: 1,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    /*
     * 获取页面数据
     * */
    getList() {
      this.listLoading = true;
      middleList(this.Qs.stringify(this.listQuery)).then((response) => {
        this.listLoading = false;
        this.list = response.page_content;
        this.total = response.result_num;
      }).catch(err => {
        this.listLoading = false;
      });
    },
    /*
     * 查询数据
     * */
    handleFilter() {
      this.listQuery.pre_db_para_begin_idx = 0;
      this.getList();
    },
    /*
     * 点击分页进行查询
     * */
    getPageList(val) {
      this.listQuery.pre_db_para_begin_idx =
        (val.page - 1) * this.listQuery.pre_db_para_length_4_list;
      this.getList();
    },
    // 新增/编辑数据
    onEditOrAdd(row) {
      this.$refs.refNewModify.onEditOrAdd(row);
    },

    // 刷新页面数据
    onRefresh() {
      this.getList();
    },

    handleDelete(item) {
      this.$confirm("您确定要删除该行业吗?", "提示", {
        type: "warning",
      })
        .then(() => {
          middleList(
            this.Qs.stringify({
              invoke_method: "public_insert_or_update_middle_table",
              pre_db_para_middle_table_name:
                "public_middle_table_lite_mod_ai_chatgpt",
              type_middle_app: 12001,
              type_inner_app: 1001,
              is_online: 111,
              pre_db_para_id_public_middle_table: item.id_public_middle_table,
            })
          )
            .then((response) => {
              this.$notify({
                title: "Success",
                message: "删除成功",
                type: "success",
                duration: 2000,
              });
              if (
                this.total - 1 ==
                (this.currentPage - 1) *
                  this.listQuery.pre_db_para_length_4_list
              ) {
                if (this.currentPage - 2 > 0 || this.currentPage - 2 == 0) {
                  this.listQuery.pre_db_para_begin_idx =
                    (this.currentPage - 2) *
                    this.listQuery.pre_db_para_length_4_list;
                }
              }
              this.getList();
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../styles/common.scss";
.page-industry-list {
  .filter-container {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
